<div class="HelpDiv">
	<div class="HelpDivHead">
		<div class="HelpTitle">表格控件（DataGrid）</div>
		<div class="HelpMenu">
		  <div><a href="#Property">属性</a></div>
		  <div><a href="#Event">事件</a></div>
		  <div><a href="#ColumnPublic">列公共特性</a></div>
		  <div><a href="#TextboxColumn">文本列</a></div>
		  <div><a href="#NumberBoxColumn">数值列</a></div>
		  <div><a href="#PercentBoxColumn">百分比列</a></div>
		  <div><a href="#CheckBoxColumn">多选框列</a></div>
		  <div><a href="#CalendarColumn">日期时间列</a></div>
		  <div><a href="#ReferColumn">参照列</a></div>
		  <div><a href="#DropDownListColumn">下拉框列</a></div>
		  <div><a href="#HtmlColumn">Html列</a></div>
		</div>
	</div>

	<div class="HelpBody">
		<div class="HelpBodyBig">属性事件</div>
		<div>
			<div id="Property" class="HelpBodyMiddle">属性</div>
			<div class="HelpBodySmall">
				<div class="HelpBoth">module</div>
				<div>双向传递，属性名称区分大小写，绑定Module的数据</div>
			</div>
			<div class="HelpBodySmall">
				<div>width</div>
				<div>表格宽度，默认为100%</div>
			</div>
			<div class="HelpBodySmall">
				<div>height</div>
				<div>表格高度，默认为100%</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsSelect</div>
				<div>是否支持多选，默认为false</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsFilter</div>
				<div>是否支持过滤，默认为true</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsOrder</div>
				<div>是否支持单击列标题排序，默认为true</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsAutoLoad</div>
				<div>是否自动加载数据，默认为true，必须是实体module才会自动加载，自定义module不会</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsEdit</div>
				<div>是否可编辑，默认为true</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsAdd</div>
				<div>是否可新增行，默认为true，当IsEdit=true的时候有效</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsModify</div>
				<div>是否可修改行记录，默认为true，当IsEdit=true的时候有效</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsDelete</div>
				<div>是否可删除行记录，默认为true，当IsEdit=true的时候有效</div>
			</div>

			<div id="Event" class="HelpBodyMiddle">事件</div>
			<div class="HelpBodySmall">
				<div>rowdblclick</div>
				<div>行双击事件,JavaScript事件，由表格行的ondblclick触发</div>
			</div>
			<div class="HelpBodySmall">
				<div>rowchange</div>
				<div>行改变事件，单击改变焦点行、翻页会触发</div>
			</div>
			<div class="HelpBodySmall">
				<div>cellvaluechange</div>
				<div>单元格内容改变事件，返回参数：columnName, newValue, oldValue</div>
			</div>
			<div class="HelpBodySmall">
				<div>cellclick</div>
				<div>点击单元格默认事件触发之前触发，返回参数：列名称</div>
			</div>
			<div class="HelpBodySmall">
				<div>addrow</div>
				<div>新增行后触发事件，返回参数：新增行记录</div>
			</div>
			<div class="HelpBodySmall">
				<div>deleterow</div>
				<div>行删除后触发事件，返回参数：被删除的记录</div>
			</div>
			<div class="HelpBodySmall">
				<div>order</div>
				<div>点击列标题排序，数据载入完成后触发事件，返回参数：当前module的记录集合</div>
			</div>
			<div class="HelpBodySmall">
				<div>turnpage</div>
				<div>翻页后触发事件，返回参数：当前页的数据集合</div>
			</div>

			<div id="Event" class="HelpBodyMiddle">列类型</div>
			<div class="HelpBodySmall">•&nbsp;<a href="#TextboxColumn">文本列</a></div>
			<div class="HelpBodySmall">•&nbsp;<a href="#NumberBoxColumn">数值列</a></div>
			<div class="HelpBodySmall">•&nbsp;<a href="#PercentBoxColumn">百分比列</a></div>
			<div class="HelpBodySmall">•&nbsp;<a href="#CheckBoxColumn">多选框列</a></div>
		  	<div class="HelpBodySmall">•&nbsp;<a href="#CalendarColumn">日期时间列</a></div>
		  	<div class="HelpBodySmall">•&nbsp;<a href="#ReferColumn">参照列</a></div>
		  	<div class="HelpBodySmall">•&nbsp;<a href="#DropDownListColumn">下拉框列</a></div>
		  	<div class="HelpBodySmall">•&nbsp;<a href="#HtmlColumn">Html列</a></div>

		  	<div class="HelpBodyMiddle">代码样例</div>
			<div class="HelpBodySmall">
				&lt;DataGrid module="Module.moduleName" rowdblclick="rowDblClick()"&gt;<br>
      			&nbsp;&nbsp;&nbsp;&nbsp;&lt;TextBoxColumn DisplayName="文本列" ValueField="textField">&lt;/TextBoxColumn&gt;<br>
      			&nbsp;&nbsp;&nbsp;&nbsp;&lt;NumberBoxColumn DisplayName="数值列" Round="{Precision: 2, RoundType: 3, RoundValue: 5}" ValueField="numField"&gt;&lt;/NumberBoxColumn&gt;<br>
      			&nbsp;&nbsp;&nbsp;&nbsp;&lt;PercentBoxColumn DisplayName="百分比列" Round="{Precision: 4, RoundType: 3, RoundValue: 5}" ValueField="percentField"&gt;&lt;/PercentBoxColumn&gt;<br>
      			&nbsp;&nbsp;&nbsp;&nbsp;&lt;CheckBoxColumn DisplayName="CheckBox列" ValueField="checkField">&lt;/CheckBoxColumn&gt;<br>
      			&nbsp;&nbsp;&nbsp;&nbsp;&lt;CalendarColumn DisplayName="日期列" ValueField="dateField"&gt;&lt;/CalendarColumn&gt;<br>
      			&nbsp;&nbsp;&nbsp;&nbsp;&lt;ReferColumn DisplayName="显示名称" EntityName="Work"  WindowTitle="作业" ValueField="Work"&gt;<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Column type="CheckBox" DisplayName="入库点" ValueField="IsStoragePoint"&gt;&lt;/Column&gt;<br>
        		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Column type="TextBox" DisplayName="备注" ValueField="Remark"&gt;&lt;/Column&gt;<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ReferColumn&gt;<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;HtmlColumn DisplayName="操作"&gt;<br>
        		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Button Type="button" ng-click="onDownload(CurrentRecord)"&gt;下载&lt;/Button&gt;<br>
        		&nbsp;&nbsp;&nbsp;&nbsp;&lt;/HtmlColumn&gt;<br>
				&lt;/DataGrid&gt;
	    	</div>
		</div>

		<br>
		<div>
			<div id="ColumnPublic" class="HelpBodyBig">列公共特性</div>
			<div class="HelpBodyMiddle">属性：</div>
			<div class="HelpBodySmall">			
				<div>DisplayName</div>
				<div>列显示名称</div>
			</div>
			<div class="HelpBodySmall">			
				<div>ValueField</div>
				<div>绑定字段</div>
			</div>
			<div class="HelpBodySmall">			
				<div>Width</div>
				<div>实时监控，列宽度，默认值：100px</div>
			</div>
			<div class="HelpBodySmall">			
				<div>IsEmpty</div>
				<div>是否可空，默认为true</div>
			</div>
			<div class="HelpBodySmall">			
				<div>IsTitleClick</div>
				<div>列头可点击，默认为false</div>
			</div>
			<div class="HelpBodySmall">			
				<div>IsFilter</div>
				<div>列头是否支持过滤，默认为true，DataGrid的IsFilter=true，该属性才有效</div>
			</div>
			<div class="HelpBodySmall">			
				<div>IsDisplay</div>
				<div>实时监控，是否显示，默认值：true</div>
			</div>
			<div class="HelpBodySmall">			
				<div>IsOrder</div>
				<div>列是否支持排序，DataGrid的IsOrder=true，该属性才有效</div>
			</div>

			<div class="HelpBodyMiddle">事件：</div>
			<div class="HelpBodySmall">			
				<div>titleclick</div>
				<div>点击列头事件</div>
			</div>
		</div>

		<br>
		<div>
			<div id="TextboxColumn" class="HelpBodyBig">文本列（TextboxColumn）</div>			
			<div class="HelpBodyMiddle">代码样例</div>
			<div class="HelpBodySmall">&lt;TextBoxColumn DisplayName="显示名称" width="100px" ValueField="Field"&gt;&lt;/TextBoxColumn&gt;</div>
		</div>

		<br>
		<div>
			<div id="NumberBoxColumn" class="HelpBodyBig">数值列（NumberBoxColumn）</div>
			<div class="HelpBodyMiddle">属性：</div>
			<div class="HelpBodySmall">			
				<div>Round</div>
				<div>
					JSON对象字符串，可空，后台自动解析为对象，然后取值，<br>
					设置精度(Precision)、舍入类型(RoundType)、舍入值(RoundValue)，<br>
					一旦设置该值，精度必须录入，RoundType默认四舍五入，RoundValue默认为5，<br>
					默认值：nulll
				</div>
			</div>
			<div class="HelpBodySmall">			
				<div>MinValue</div>
				<div>可录入的最小值，如果不录入该参数，将是数值的minValue</div>
			</div>
			<div class="HelpBodySmall">			
				<div>MaxValue</div>
				<div>可录入的最大值，如果不录入该参数，将是数值的maxValue</div>
			</div>

			<div class="HelpBodyMiddle">代码样例</div>
			<div class="HelpBodySmall">&lt;NumberboxColumn DisplayName="显示名称" width="100px" ValueField="Field"
			&nbsp;&nbsp;Round="{Precision: 2, RoundType: 3, RoundValue: 5}" &gt;&lt;/NumberboxColumn&gt;</div>
		</div>

		<br>
		<div>
			<div id="PercentBoxColumn" class="HelpBodyBig">百分比列（PercentBoxColumn）</div>
			<div class="HelpBodyMiddle">属性：</div>
			<div class="HelpBodySmall">			
				<div>Round</div>
				<div>
					JSON对象字符串，可空，后台自动解析为对象，然后取值，<br>
					设置精度(Precision)、舍入类型(RoundType)、舍入值(RoundValue)，<br>
					一旦设置该值，精度必须录入，RoundType默认四舍五入，RoundValue默认为5，<br>
					默认值：nulll
				</div>
			</div>
			<div class="HelpBodySmall">			
				<div>MinValue</div>
				<div>可录入的最小值，如果不录入该参数，将是数值的minValue</div>
			</div>
			<div class="HelpBodySmall">			
				<div>MaxValue</div>
				<div>可录入的最大值，如果不录入该参数，将是数值的maxValue</div>
			</div>

			<div class="HelpBodyMiddle">代码：</div>
			<div class="HelpBodySmall">			
				&lt;PercentBoxColumn DisplayName="显示名称" width="100px" ValueField="Field"
			&nbsp;&nbsp;Round="{Precision: 4, RoundType: 3, RoundValue: 5}" &gt;&lt;/PercentBoxColumn&gt;
			</div>
		</div>

		<br>
		<div>
			<div id="CheckBoxColumn" class="HelpBodyBig">多选框列（CheckBoxColumn）</div>
			<div class="HelpBodyMiddle">代码：</div>
			<div class="HelpBodySmall">			
				&lt;CheckBoxColumn DisplayName="显示名称" width="100px" ValueField="Field"&gt;&lt;/CheckBoxColumn&gt;
			</div>
		</div>

		<br>
		<div>
			<div id="CalendarColumn" class="HelpBodyBig">日期时间列（CalendarColumn）</div>
			<div class="HelpBodyMiddle">属性：</div>
			<div class="HelpBodySmall">			
				<div>Type</div>
				<div>字符串，Date（日期）和DateTime（日期时间）两种格式，默认值：DateTime</div>
			</div>

			<div class="HelpBodyMiddle">代码：</div>
			<div class="HelpBodySmall">			
				&lt;CalendarColumn DisplayName="显示名称" Type="Date" width="100px" ValueField="Field"&gt;&lt;/CalendarColumn&gt;
			</div>
		</div>

		<br>
		<div>
			<div id="ReferColumn" class="HelpBodyBig">参照列（ReferColumn）</div>
			<div class="HelpBodyMiddle">属性：</div>
			<div class="HelpBodySmall">
				<div class="HelpNotEmpty">EntityName</div>
				<div>表名称，参照查询对应的实体</div>
			</div>
			<div class="HelpBodySmall">
				<div>Condition</div>
				<div>查询条件，例如：<br>
					Condition="{Code: 'Code1'}"
				</div>
			</div>
			<div class="HelpBodySmall">
				<div>OrderBy</div>
				<div>排序条件，例如：<br>
					OrderBy="{CreatedOn : -1}"
				</div>
			</div>
			<div class="HelpBodySmall">
				<div>Populate</div>
				<div>关联查询子表，例如：<br>
					Populate="ItemMaster"<br>
					Populate="{path: 'Department', select: 'Name'}"<br>
					Populate="[{path: 'ItemMaster', select: 'Code Name'}, {path: 'Department', select: 'Name'}]"
				</div>
			</div>
			<div class="HelpBodySmall">
				<div>WindowTitle</div>
				<div>参照弹出窗口标题名称</div>
			</div>
			<div class="HelpBodySmall">
				<div>KeyField</div>
				<div>绑定key值的字段名，默认：_id</div>
			</div>
			<div class="HelpBodySmall">
				<div>CodeField</div>
				<div>控件有焦点时的显示内容，绑定Code值的字段名，默认：Code</div>
			</div>
			<div class="HelpBodySmall">
				<div>TextField</div>
				<div>控件无焦点时的显示内容，绑定Text值的字段名，默认：Name</div>
			</div>
			<div class="HelpBodySmall">
				<div>IsSelect</div>
				<div>是否支持多选，默认为：false</div>
			</div>

			<div class="HelpBodyMiddle">事件：</div>
			<div class="HelpBodySmall">			
				<div>beforeshow</div>
				<div>弹出参照窗口之前触发</div>
			</div>

			<div class="HelpBodyMiddle">子集合（Column，与参照控件子集合一样）</div>
			<div class="HelpBodySmall">
				<div>Type</div>
				<div>
					列类型，默认为TextBox，还可以根据显示需要选择：<br>
					CheckBox：<br>
					NumberBox：数字列可录入精度属性Round，同NumberBox设置<br>
					PercentBox：百分比列可录入精度属性Round，同PercentBox设置<br>
					DropDownList：必须录入<font class="HelpNotEmpty">Enum</font>属性值，与DropDownList的enum属性相同<br>
					Calendar：可录入CalendarType，"DateTime"或者"Date"，默认为DateTime类型
				</div>
			</div>

			<div class="HelpBodyMiddle">代码：</div>
			<div class="HelpBodySmall">			
				&lt;ReferColumn DisplayName="显示名称" EntityName="Work"  WindowTitle="作业" ValueField="Work"&gt;<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;Column type="CheckBox" DisplayName="入库点" ValueField="IsStoragePoint"&gt;&lt;/Column&gt;<br>
        		&nbsp;&nbsp;&nbsp;&nbsp;&lt;Column type="TextBox" DisplayName="备注" ValueField="Remark"&gt;&lt;/Column&gt;<br>
				&lt;/ReferColumn&gt;
			</div>
		</div>

		<br>
		<div>
			<div id="DropDownListColumn" class="HelpBodyBig">下拉框列（DropDownListColumn）</div>
			<div class="HelpBodyMiddle">属性：</div>
			<div class="HelpBodySmall">			
				<div class="HelpNotEmpty">enum</div>
				<div>下拉框绑定哪个枚举，例如：<br>
					$scope.RowStatus = {<br>
			            &nbsp;&nbsp;&nbsp;&nbsp;UnChange: {Value: 0, Text: '没变'},<br>
			            &nbsp;&nbsp;&nbsp;&nbsp;Insert: {Value: 1, Text: '新增'},<br>
			            &nbsp;&nbsp;&nbsp;&nbsp;Delete: {Value: 2, Text: '删除'},<br>
			            &nbsp;&nbsp;&nbsp;&nbsp;Modify: {Value: 3, Text: '修改'}<br>
			        }<br>
					Html代码里面添加 enum="RowStatus"
				</div>
			</div>

			<div class="HelpBodyMiddle">代码：</div>
			<div class="HelpBodySmall">			
				&lt;DropDownListColumn DisplayName="状态" ValueField="Status" enum="RowStatus"&gt;&lt;/DropDownListColumn&gt;
			</div>
		</div>

		<br>
		<div>
			<div id="HtmlColumn" class="HelpBodyBig">HTML列（HtmlColumn）</div>
			<div class="HelpBodyMiddle">关键字：</div>
			<div class="HelpBodySmall">
				<div>CurrentRecord</div>
				<div>事件方法里面若需要用到此行的FocusedRecord数据，直接用该关键字，渲染表格的时候会将CurrentRecord转义为FocusedRecord值</div>
			</div>

			<div class="HelpBodyMiddle">代码：</div>
			<div class="HelpBodySmall">
				&lt;HtmlColumn DisplayName="操作"&gt;<br>
        			&nbsp;&nbsp;&nbsp;&nbsp;&lt;Button Type="button" ng-click="onDownload(CurrentRecord)"&gt;下载&lt;/Button&gt;<br>
        		&lt;/HtmlColumn&gt;
			</div>
		</div>		
	</div>
</div>